<template>
  <div class="">
    <!-- <h2 class="function-header">课程学习</h2> -->
    <div class="course-container">
      <div class="course-total-box">
        <div class="left-area">
          <!-- 课程目录显示  -->
          <div class="bottom-chapter">
            <div class="chapter-tit">目录</div>
            <el-scrollbar max-height="calc(100vh - 4.5rem)" style="padding-right: 10px;">
              <el-tree ref="treeRef" 
                :data="catalogueTree" 
                :props="defaultProps" 
                node-key="id" 
                @node-drop="handleDrop" 
                @node-expand="handleNodeExpand" 
                @node-collapse="handleNodeCollapse" 
                class="category-tree" 
                v-loading="treeLoading" 
                default-expand-all
                draggable 
                :expand-on-click-node="false"
                :allow-drop="allowDrop" 
              >
                <template #default="{ node, data }">
                  <div class="custom-tree-node" :class="{'active-level': data.id == currentChapter?.id}" >
                    <span class="tree-cell name-cell" 
                      :class="{
                        'first-level': node.level == 1,
                        'static-class': true // 静态类名
                      }" 
                      @click="data.type != 'CHAPTER' && data.id != currentChapter?.id ? handleNodeClick(data) : null"
                      :title="data.name"
                    >
                      <template v-if="showLevel">{{ `${data.level} - ` }}</template>{{ data.name }}
                    </span>
                    <div class="progress-box" v-if="data.learningProgress && data.learningProgress?.progress > 0" >
                      <el-progress type="circle" v-if="data.learningProgress.progress == 100" :percentage="data.learningProgress.progress" status="success" stroke-width="3"/>
                      <span v-else>({{data.learningProgress.progress}}%)</span>
                    </div>
                  </div>
                </template>
              </el-tree>
            </el-scrollbar>
          </div>
        </div>
        <!-- 右侧内容显示 主要是视频，如果是其他文件直接显示 -->
        <div class="center-content">
          <div class="top-course-info">
            <div class="left-course-info" @click="showIntro">
              <div class="cover" v-if="courseInfo?.coverImg">
                <img :src="courseInfo.coverImg" alt="">
              </div>
              <div class="course-name">{{courseInfo?.name}}</div>
            </div>
            <div class="right-option">
              <div class="option-item" @click="showIntro">
                <el-icon><Notebook /></el-icon>
                <p>课程介绍</p>
              </div>
              <div class="option-item" @click="showInfo">
                <el-icon><Folder /></el-icon>
                <p>课程资料</p>
              </div>
              <div class="option-item"  @click="showProgress">
                <el-icon><PieChart /></el-icon>
                <p>学习进度</p>
              </div>
              <!-- <div class="option-item"  @click="showIntro">
                <el-icon><Edit /></el-icon>
                <p>课程评价</p>
              </div> -->
            </div>
          </div>
          <div class="top-chapter-title"><span>当前章节：</span>{{currentChapter?.path}}</div>
          <el-scrollbar>
            <div class="content-list">
              <div class="resource-item" :class="{'active' : activeResource?.id == item.id}" v-for="item in resourceList" :key="item.id" @click="changeActiveResource(item)">
                {{item.title}}
              </div>
            </div>
          </el-scrollbar> 
          <!-- 内容显示区域 视频文档ppt等 -->
          <div class="content-container">
            <div class="left-resource" > 
              <div v-if="currentResource && currentResource?.fileType" class="resource-container"> 
                <VideoPlayer 
                  :videoSrc="videoSrc" 
                  :currentTime="theCurrentTime" 
                  ref="videoRef" 
                  v-if="currentResource.fileType == '.mp4' || currentResource.fileType == 'video/mp4'"
                  :testList="testList" 
                  @play="startProgressTimer"
                  @pause="pauseProgressTimer"
                  @end="endVideoProgress"
                />
                <el-scrollbar height="calc(100vh - 5rem)" v-else class="resource-scrollbar">
                  <vue-office-docx v-if="currentResource.fileType == '.docx'" :src="currentResource.url" />
                  <vue-office-pptx v-else-if="currentResource.fileType == '.pptx'" :src="currentResource.url" />
                  <iframe
                    v-else-if="currentResource.fileType == '.pdf' || currentResource.fileType == 'application/pdf'"
                    :src="currentResource.url"
                    :class="currentResource.url"
                    width="100%"
                    style="height: calc(100vh - 5rem);"
                    frameborder="0"
                  >
                    <p>您的浏览器不支持预览此文档。</p>
                  </iframe>
                </el-scrollbar>
              </div>
              <el-empty v-else description="暂无课程资料" />
            </div>
             <!-- 右侧笔记编辑 目前是一个章节对应一个笔记 -->
            <div class="right-notes">
              <div class="note-title">
                <div class="name">课程笔记</div>
                <div>
                  <el-button type="primary" @click="getProgress" >进度</el-button>
                  <el-button type="primary" @click="addNote" >增加笔记</el-button>
                </div>
              </div>
              <div class="note-container">
                <el-scrollbar max-height="calc(100vh - 5rem)">
                  <div class="note-item" v-for="item in noticeData" :key="item.id">
                    <div class="note-header">
                      <div class="left-time" v-if="currentResource?.fileType == '.mp4' || currentResource?.fileType == 'video/mp4'">
                        <span class="time" v-if="item.id === editingNoteId">{{ formatVideoTime(editingNote.videoTime) }}</span>
                        <span class="time" v-else>{{ formatVideoTime(item.videoTime) }}</span>
                        <el-icon title="定位当前时间" @click="dinTime" v-if="item.id === editingNoteId"><Timer /></el-icon>
                      </div>
                      <div class="right-option">
                        <el-icon @click="editNote(item)"><Edit /></el-icon>
                        <el-icon @click="delNote(item)"><Delete /></el-icon>
                      </div>
                    </div>
                    
                    <div v-if="item.id === editingNoteId" class="note-edit">
                      <el-input
                        v-model="editingNote.content"
                        type="textarea"
                        :rows="3"
                        placeholder="内容"
                        class="note-edit-input"
                      />
                      <div class="edit-actions">
                        <el-button size="small" @click="saveTheNote">保存</el-button>
                        <el-button size="small" @click="cancelEdit">取消</el-button>
                      </div>
                    </div>
                    
                    <div v-else class="note-content">
                      <p style="white-space: pre-line;">{{ item.content }}</p>
                    </div>
                  </div>
                </el-scrollbar>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学习进度弹窗  -->
    <el-dialog v-model="progressVisible" title="学习进度" width="450px" >
      <div class="progress-list" v-if="userProgressData">
        <div class="progress-item">
          <div class="left-box">
            <el-icon><PieChart /></el-icon>
            <div class="progress-child">课时学习进度：<span>{{userProgressData.completedLesson}}</span>/{{userProgressData.totalLesson}}</div>
          </div>
          <div class="right-box">
            <el-popover
              placement="top-start"
              :width="200"
              trigger="hover"
              content="学习内容的结构是章节包含小节，小节学习进度是指你已经学习过的小节数和总小节的比值。"
            >
              <template #reference>
                <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </div>
        <div class="progress-item">
          <div class="left-box">
            <el-icon><VideoPlay /></el-icon>
            <div class="progress-child">视频学习时长：<p v-if="userProgressData.hours"><span>{{userProgressData.hours}}</span>时</p><span>{{userProgressData.minutes}}</span>分</div>
          </div>
          <div class="right-box">
            <el-popover
              placement="top-start"
              :width="200"
              trigger="hover"
              content="当前课程中视频学习的实际观看的累计时长。"
            >
              <template #reference>
                <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
              </template>
            </el-popover>
          </div>
        </div>
        <div class="progress-item">
          <div class="left-box">
            <el-icon><VideoCamera /></el-icon>
            <div class="progress-child">视频观看个数：<span>{{userProgressData.videoViewNumber}}</span>个</div>
          </div>
          <el-popover
          placement="top-start"
          :width="200"
          trigger="hover"
          content="实际视频的观看个数。"
        >
          <template #reference>
            <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
          </template>
        </el-popover>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer"> 
          <el-button type="primary" @click="progressVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>
   
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCourseChapterTreeByUserChapter } from "@/api/chapter";
import VideoPlayer from '../../components/VideoPlay.vue'
import { Folder, Edit, Delete, Timer, PieChart, VideoPlay, VideoCamera, QuestionFilled, Notebook } from '@element-plus/icons-vue'
import { selectByIdCourse } from "@/api/course";
import { getResourceDataRefer } from "@/api/resource";
import { ElMessageBox, ElMessage } from 'element-plus'
import { 
  saveNote,
  getChapterNoteInCourseInstanceChapterNote
 } from "@/api/note";
import { saveProgress, userLearningStatisticsProgress, userLastLearningInCourseInstanceProgress } from "@/api/progress";
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePptx from "@vue-office/pptx";
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration';

dayjs.extend(duration);
const route = useRoute()
const router = useRouter()
// const videoSrc = ref('http://10.10.0.120:9000/wave-bucket/videos/2025-03-11/77abc95d-385d-42a6-a31e-ccff6c13660e.mp4')
const videoSrc = ref('http://10.10.0.120:9000/wave-bucket/videos/2025-06-03/3a5c4218-4457-4738-a911-a63a756ef909.mp4')
const theCurrentTime = ref(0);

//根据课程实例获取课程目录
const catalogueTree = ref()
const getChapter = async () => {
  const res = await getCourseChapterTreeByUserChapter({courseInstanceId: route.query.id});
  if(res.code == 20000){
    catalogueTree.value = res.data;
    console.log("catalogueTree.value",catalogueTree.value);
    
  }
}
//获取课程信息，用于顶部显示
const courseInfo = ref()
const getCourseInfo = async () => {
  const courseId = route.query.courseId;
  const res = await selectByIdCourse({ id: courseId });
  if (res.code === 20000) {
    courseInfo.value = res.data;
    console.log("courseInfo",courseInfo.value);
  }
};

//根据章节id获取学中测试
const testList = ref()

//点击章节更改为激活状态 
const currentChapter = ref()
const currentResource = ref()
const currentNoteId = ref()
const handleNodeClick = async (data) => {
  //先保存一次当前章节的学习进度
  if (currentResource.value && currentResource.value.fileType && (currentResource.value.fileType == '.mp4' || currentResource.value.fileType == 'video/mp4')){
    await saveUserProgress();
  }
  //切换当前章节为点击的这一个
  currentChapter.value = data;
  console.log("currentChapter.value",currentChapter.value);
  if(currentChapter.value.learningTests){
    console.log("currentChapter.value.learningTests",currentChapter.value.learningTests);
    
    testList.value = currentChapter.value.learningTests;
  } else {
    testList.value = [];
  }
  
  //根据章节id获取资源
  if(!data.dataId){
    currentResource.value = null;
  } else{
    console.log("dataId",data.dataId);
    const resourceRes = await getResourceDataRefer({ dataId: data.dataId });
    if(resourceRes.code === 20000){
      currentResource.value = resourceRes.data;
      console.log("currentResource.value",currentResource.value);
      
      //如果是视频文件 切换视频播放地址并开启进度定时器
      if (currentResource.value.fileType == '.mp4' || currentResource.value.fileType == 'video/mp4') {
        videoSrc.value = currentResource.value.url;
        //如果是已经学过的，跳转上一次的进度
        if(currentChapter.value.learningProgress.status == 'IN_PROGRESS'){
          console.log("跳转到",currentChapter.value.learningProgress.currentCounting);
          theCurrentTime.value = currentChapter.value.learningProgress.currentCounting;
        }
        //默认当前学习进度加一
        saveProgress({
          id: currentChapter.value.learningProgress.id,
          currentCounting: currentChapter.value.learningProgress.currentCounting + 1,
          answerSheet: "",
        })
        //未开始和进行中的章节开启保存进度定时器
        if(currentChapter.value.learningProgress.status != 'COMPLETED'){
          startProgressTimer();  //开启进度定时器
        }
      } else {
        //文档类型资源直接已读
        saveProgress({
          id: currentChapter.value.learningProgress.id,
          currentCounting: currentResource.value.counting,
          answerSheet: "",
        })
        //再次刷新章节数据
        getChapter();
        pauseProgressTimer(); //清除定时器
      }
    } else {
      ElMessage.error("获取资源失败，请稍后重试");
    }
  }
  //根据章节id获取 笔记数据
  const noteRes = await getChapterNoteInCourseInstanceChapterNote({ courseInstanceId: route.query.id, chapterId: data.id });
  if(noteRes.code === 20000){
    currentNoteId.value = (noteRes.data && noteRes.data.id) || '';
    noticeData.value = JSON.parse((noteRes.data && noteRes.data.content) || '[]');
    console.log("noticeData",noticeData.value);
    if(!noteRes.data || noteRes.data.length === 0){
      noticeData.value = [];
      addNote();
    }
  } 
}
function findChapterById(tree, chapterId) {
  // 遍历当前层级
  for (const node of tree) {
    // 如果当前节点匹配，直接返回
    if (node.id === chapterId) {
      return node;
    }
    
    // 如果有子节点，递归查找
    if (node.children && node.children.length > 0) {
      const found = findChapterById(node.children, chapterId);
      if (found) return found;
    }
  }
  
  // 没找到返回null
  return null;
}
//初始化章节
const initializeWithChapter = async (chapterId) => {
  // 查找章节
  const chapter = findChapterById(catalogueTree.value, chapterId);
  if (chapter) {
    currentChapter.value = chapter;
    await handleNodeClick(chapter);
  } else {
    ElMessage.error("未找到指定章节");
  }
};

//章节资源管理
const resourceList = ref([]);
const activeResource = ref()

const changeActiveResource = (item) => {
  activeResource.value = item;
}
//章节笔记管理
const noticeData = ref([]);
const editingNoteId = ref(null);
const ifNewNotice = ref(false);
const editingNote = ref({
  id: '',
  title: '',
  content: '',
  chapterId: '',
  courseId: '',
  videoTime: "",
  updateTime: new Date().toISOString()
});
const formatVideoTime = (seconds) => {
  return dayjs.duration(seconds, 'seconds').format('HH:mm:ss');
};
const dinTime = () => {
  if (videoRef.value) {
    const currentTime = videoRef.value.getCurrentTime();
    console.log("当前视频时间", currentTime);
    editingNote.value.videoTime = currentTime;
  } else {
    ElMessage.warning("请先播放视频");
  }
};
const addNote = () => {
  if(editingNote.value.content == ''){
    noticeData.value = noticeData.value.filter(notice => notice.id !== editingNote.value.id);
  }
  editingNote.value = {
    id: Date.now().toString(),
    title: '新笔记',
    content: '',
    chapterId: '', // 可以根据需要设置默认值
    courseId: '',
    videoTime: "",
    updateTime: new Date().toISOString()
  };
  editingNoteId.value = editingNote.value.id;
  noticeData.value.push(editingNote.value);
  if(currentResource.value && currentResource.value.fileType == '.mp4'){
    dinTime();
  } 
  ifNewNotice.value = true
};
const delNote = (item) => {
  ElMessageBox.confirm("确定删除该笔记吗，删除后不可恢复？", "提示", {
    distinguishCancelAndClose: true,
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    noticeData.value = noticeData.value.filter(notice => notice.id !== item.id);
    ElMessage.sussess("删除成功");
  });
}

// 编辑笔记
let tempNote = ref({});
const editNote = (item) => {
  ifNewNotice.value = false
  editingNoteId.value = item.id;
  editingNote.value = { ...item };
  tempNote.value = {...item}
};

// 保存笔记
const saveTheNote = async () => {
  if (videoRef.value) {
    const currentTime = videoRef.value.getCurrentTime();
    console.log("当前视频时间", currentTime);
  }
  if(editingNote.value.content.trim() != ''){
    const index = noticeData.value.findIndex(note => note.id === editingNoteId.value);
    if (index !== -1) {
      noticeData.value[index] = { 
        ...editingNote.value,
        updateTime: new Date().toISOString() 
      };
      console.log("noticeData.value", noticeData.value);
      
      await saveChapterNote()
      editingNoteId.value = ""
    }
  } else {
    ElMessage.warning("笔记内容不能为空")
  }
};

// 保存章节笔记
const saveChapterNote = async () => { 
  const res = await saveNote({id: currentNoteId.value ,chapterId: currentChapter.value.id, content: JSON.stringify(noticeData.value)})
  if(res.code === 20000){
    ElMessage.success('保存成功')
  } else {
    ElMessage.error('保存失败')
  }
}

// 修改取消逻辑
const cancelEdit = () => {
  if (editingNoteId.value) {
    // 如果是新增笔记且未保存，需要移除
    if(ifNewNotice.value){
      noticeData.value = noticeData.value.filter(notice => notice.id !== editingNote.value.id);
    } else {
      editingNote.value = tempNote.value;
      saveNote()
    }
    editingNoteId.value = null;
    ifNewNotice.value = false
  }
};

//视频播放进度获取
const videoRef = ref(null);
const progressTimer = ref(null);
const isTimerActive = ref(false);
const currentTime = ref(0);
const getProgress = () => {
  if (videoRef.value) {
    currentTime.value = videoRef.value.getCurrentTime();
    const progress =  videoRef.value.playbackProgress;
    console.log("progress",progress);
    console.log("currentTime",currentTime.value);
    currentChapter.value.progress = progress;
    saveUserProgress() //保存用户进度
    getChapter()  //更新章节进度
  }
  return 0;
};
//保存学习进度
const saveUserProgress = () => {
  if (currentChapter.value) {
    saveProgress({
      id: currentChapter.value.learningProgress.id,
      currentCounting: currentTime.value,
      answerSheet: "",
    });
  }
};
//视频播放结束保存学习进度
const endVideoProgress = async (answerList) => {
  console.log("answerList",answerList);
  console.log("currentChapter.value",currentChapter.value);
  
  await saveProgress({
    id: currentChapter.value.learningProgress.id,
    currentCounting: currentResource.value.counting,
    answerSheet: answerList,
  });
  await getChapter();
}
// 启动定时器 每30秒获取一次学习进度
const startProgressTimer = () => {
  if (!isTimerActive.value) {
    isTimerActive.value = true;
    if(currentChapter.value.type === 'VIDEO'){
      progressTimer.value = setInterval(getProgress, 30000); 
    }
    console.log('进度定时器已启动');
  }
};

// 暂停定时器
const pauseProgressTimer = () => {
  if (isTimerActive.value) {
    clearInterval(progressTimer.value);
    isTimerActive.value = false;
    console.log('进度定时器已暂停');
  }
};

//获取用户当前实例学习进度
const userProgressData = ref(null);
const progressVisible = ref(false);
const showProgress = async () => { 
  const res = await userLearningStatisticsProgress({
    courseInstanceId: route.query.id
  })
  if(res.code === 20000){
    userProgressData.value = res.data;
    if(userProgressData.value.videoLearningDuration > 0){
      userProgressData.value.hours = Math.floor(userProgressData.value.videoLearningDuration / 3600); 
      userProgressData.value.minutes = Math.floor(userProgressData.value.videoLearningDuration / 60 % 60);
    }
  }
  progressVisible.value = true;
};

//初始化设置第一个子节点为激活状态
const findFirstLeafNode = (nodes) => {
  if (!nodes || nodes.length === 0) return null;
  
  for (const node of nodes) {
    if (!node.children || node.children.length === 0) {
      return node; // 找到叶子节点
    }
    
    const leaf = findFirstLeafNode(node.children);
    if (leaf) return leaf;
  }
  
  return null;
}

//请求上一次本课程学习进度
const userLearningProgress = async () => {
  //如果不是从笔记或者最近学习记录进入的  则请求一次最近学习记录数据
  if(!route.query.chapterId){
    const res = await userLastLearningInCourseInstanceProgress({
      courseInstanceId: route.query.id
    })
    if(res.code == 20000){
      if(res.data){
        initializeWithChapter(res.data.chapterId);
        theCurrentTime.value = res.data.currentCounting;
      } else {
        currentChapter.value = findFirstLeafNode(catalogueTree.value);
        await handleNodeClick(currentChapter.value);
      }
    }
  } 
  if (route.query.chapterId) {
    // 执行初始化逻辑
    initializeWithChapter(route.query.chapterId);
    // 清理URL 从笔记跳转过来需清除章节和时间
    router.replace({
      query: {
        ...route.query,
        chapterId: undefined,
        time: undefined
      }
    });
  }
}

//跳转课程介绍页面
const showIntro = async () => {
  router.push({
    name: 'courseDetail',
    query: {
      id: route.query.courseId
    }
  })
}
onMounted(async() => {
  if(route.query.time){
    try {
      theCurrentTime.value = atob(route.query.time);
    } catch (error) {
      console.log(error);
    }
  }
  await getCourseInfo();
  await getChapter();
  await userLearningProgress();
})

onBeforeUnmount (() => {
  //离开页面保存笔记 保存学习进度 清除定时器 
  saveChapterNote();
  getProgress();
  pauseProgressTimer();
});
</script>

<style lang="scss" scoped>
.function-header {
  margin-top: px2rem(40);
  font-weight: normal;
  font-size: px2rem(24);
}
.course-container{
  margin: px2rem(40) 0;
  border: 1px solid $borderColor;
  border-radius: px2rem(10);
  box-shadow: 0 0 10px rgba(black,.1);
  .course-total-box{
    display: flex;
    padding: px2rem(20);
    box-sizing: border-box;
    /* max-height: calc(100vh - 2.5rem); */
    .left-area {
      width: px2rem(300);
      padding-right: px2rem(10);
      margin-right: px2rem(20);
      border-right: 1px solid $borderColor;
      min-width: px2rem(30);
      .bottom-chapter{
        margin-top: px2rem(10);
        .chapter-tit{
          margin-right: 10px;
          padding: px2rem(10);
          background: #f6f6f6;
          font-size: px2rem(18);
          color: $black;
          margin-bottom: px2rem(10);
        }
        .custom-tree-node{
          display: flex;
          align-items: center;
          padding: px2rem(5) px2rem(8);
          /* margin-left: px2rem(-8); */
          box-sizing: border-box;
          margin: px2rem(2.5) 0 px2rem(2.5) px2rem(-8);
          &.active-level{
            border-radius: px2rem(3);
            background: #f5f7fa;
          }
          .tree-cell{
            flex: 1;
            font-size: px2rem(16);
            color: $black_2;
            height: px2rem(24);
            @include textEllipsis(24,1);
            &.first-level{
              font-weight: bold;
            }
          }
          .progress-box{
            /* width: px2rem(30);
            height: px2rem(30); */
            opacity: 1;
            
            :deep(.el-progress-circle){
              width: px2rem(24) !important;
              height: px2rem(24) !important;
              transform: translateY(0.02rem)
            }
            :deep(.el-progress__text){
              font-size: px2rem(14) !important;
              margin-left: 0;
              position: absolute;
              top: 50%;
              left: 50%;
              width: 100%;
              text-align: center;
              transform: translate(-50%, calc(-50% + 0.02rem));
            }
          }
        }
        :deep(.el-tree-node__content){
          padding-left: 0 !important;
          height: auto;
        }
        :deep(.el-tree-node__label){
          flex: 1;
        }
      }
    }
    .center-content{
      flex: 1;
      height: max-content;
      max-height: 100%;
      .top-course-info{
        padding-bottom: px2rem(10);
        border-bottom: 1px solid $borderColor;
        display: flex;
        justify-content: space-between;
        .left-course-info{
          display: flex;
          align-items: center;
          cursor: pointer;
          .cover{
            position: relative;
            padding-bottom: 30%;
            width: px2rem(100);
            box-shadow: 0 0 5px rgba(0,0,0,.1);
            border-radius: px2rem(5);
            overflow: hidden;
            img{
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
            }
          }
          .course-name{
            margin-left: px2rem(20);
            font-size: px2rem(24);
            color: $black;
          }
        }
        .right-option{
          display: flex;
          .option-item{
            cursor: pointer;
            text-align: center;
            margin-left: px2rem(20);
            color: $black_2;

            &:first-child{
              margin-left: 0;
            }
            i{
              transition: all .3s;
              font-size: px2rem(30);
              padding: px2rem(8);
              border-radius: 50%;
              border: 1px solid $borderColor;
              color: var(--el-color-primary);
            }
            p{
              transition: all .3s;
              margin-top: px2rem(5);
              font-size: px2rem(16);
            }
            &:hover{
              color: $mainColor;
              i{
                border: 1px solid $mainColor;
              }
            }
          }
        }
      }
      .top-chapter-title{
        color: $black;
        margin-top: px2rem(10);
        font-size: px2rem(18);
        span{
          font-size: px2rem(16);
          color: #666;
        }
      }
      .content-list{
        display: flex;
        align-items: center;
        margin: px2rem(10) 0;
        .resource-item{
          padding: px2rem(4) px2rem(10);
          background: #f5f5f5;
          border-radius: px2rem(3);
          color: $black_2;
          border: 1px solid white;
          font-size: px2rem(14);
          line-height: px2rem(21);
          cursor: pointer;
          &.active{
            color: $mainColor;
            border: 1px solid $mainColor;
          }
          
        }
        .resource-item:not(:first-child) {
          margin-left: 10px;
        }
      }
      .content-container{
        display: flex;
        .left-resource{
          flex: 1;
          /* height: 100%; */
          /* max-height: calc(100vh - 4.5rem); */
          .resource-container{
            display: flex;
            flex-direction: column;
            .resource-scrollbar{
              box-shadow: 0 0 10px rgba(0,0,0,.1);
            }
            :deep(.pptx-preview-wrapper) {
              width: 100% !important;
              height: 100% !important;
              background: #dedede;
            }
          }
        }
        .right-notes{
          width: px2rem(400);
          padding-left: px2rem(20);
          box-sizing: border-box;
          .note-title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: px2rem(20);
            color: $black;
          }
          .note-container{
            margin-top: px2rem(10);
            .note-item {
              margin-bottom: px2rem(10);
              padding: px2rem(10);
              border: 1px solid #ebeef5;
              border-radius: px2rem(4);
              background-color: #fafafa;
              .note-header{
                display: flex;
                justify-content: space-between;
                padding-bottom: px2rem(5);
                border-bottom: 1px solid $borderColor;
                .left-time{
                  display: flex;
                  align-items: center;
                  .time{
                    font-size: px2rem(16);
                    color: #222;
                    margin-right: px2rem(10);
                    display: block;
                    line-height: px2rem(16);
                  }
                  i{
                    font-size: px2rem(18);
                    color: $black;
                    cursor: pointer;
                    &:hover{
                      color: $mainColor;
                    }
                  }
                }
                .right-option{
                  display: flex;
                  i{
                    font-size: px2rem(18);
                    color: $black;
                    cursor: pointer;
                    margin: 0 px2rem(5);
                    &:hover{
                      color: $mainColor;
                    }
                  }
                }
              }
              .note-edit{
                .note-edit-input{
                  margin-top: px2rem(10);
                }
                .edit-actions{
                  margin-top: px2rem(10);
                  display: flex;
                  justify-content: end;
                }
              }
              .note-content{
                p{
                  margin-top: px2rem(8);
                  font-size: px2rem(14);
                  line-height: px2rem(21);
                  color: $black;
                }
              }
            }
          }
        }
      }
    }
  }

}
/* 学习进度弹窗 */
.progress-list{
  .progress-item{
    margin-bottom: px2rem(15);
    font-size: px2rem(20);
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-box{
      display: flex;
    }
    .progress-child{
      display: flex;
      align-items: end;
      margin-bottom: px2rem(5);
    }
    span{
      color: $black;
      font-size: px2rem(28);
      margin-right: px2rem(3);
    }
    i{
      font-size: px2rem(40);
      color: $mainColor;
      margin-right: px2rem(10);
    }
  }
}
</style>
